<section class="content">
    <header class="content__title">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">主页</li>
        </ol>
        <script src="js/echarts.min.js"></script>
        <script src="js/circleChart.min.js"></script>
        <style type="text/css">
            .zlf-sy-sjtj-top{ height: 160px;}
            .zlf-sy-top-a{ width: 25%; float: left;}
            .zlf-sy-top-nr{margin: 0px 10px; background:linear-gradient(-59deg,rgba(255,136,138,1),rgba(255,188,129,1));
                box-shadow:3px 3px 10px 0px rgba(88,6,8,0.2);border-radius:10px;height: 160px;}
            .zlf-sy-top-zhi{ float: left; color: #FFFFFF;margin-top: 40px;}
            .zlf-sy-top-img{ float: left;width: 68px;margin-top: 40px;margin-left: 20px;margin-right: 20px;}
            .zlf-sy-top-bt{font-size:24px;letter-spacing: 2px;}
            .zlf-sy-top-tj{font-size:40px; font-weight: bold; letter-spacing: 2px; font-family: arial;}
            .zlf-sy-nr-l{ width:70%; float: left; height: 450px; margin-top: 20px;    padding-right: 10px;}
            .zlf-sy-nr-r{ width:30%; float: left;height: 450px;margin-top: 20px; }
            .zlf-sy-nr-l-a{box-shadow:0px 4px 10px 0px rgba(84,84,84,0.12);border-radius:6px; background: #FFFFFF; height: 450px;margin-left: 10px;}
            .zlf-sy-bt-l{ float: left;color:rgba(90,90,90,1); font-size: 18px;line-height: 60px; margin-left: 15px;}
            .sjqh{ float: right; border-radius:8px; margin-top: 15px; margin-right: 15px;color: #5a5a5a;}
            .sjqh p{ padding: 5px 10px; float: left; border:1px solid rgba(170,170,170,1); margin-left: -1px;}
            .zlf-sy-tj-bt{ width: 100%; height: 60px;}
            .sy-qh-a{color:rgba(158,101,215,1); border:1px solid rgba(158,101,215,1);}
            .zlf-sy-tj-l{ width: 100%; height: 390px; padding: 10px;}
            .zlf-sy-tj-l img{ width: 100%;}
            .wsdjc-div{box-shadow: 0px 4px 10px 0px rgba(84,84,84,0.12);border-radius: 6px; height: 280px;}
            .mjob2_center_sq_qxt {
                text-align: center;
                width: 50%;
                float: left;
            }

            .mjob2_center_sq_qxt_bt {
                padding: 5px 0;
                color: rgba(29,33,40,0.7);
            }
            .mjob2_center_sq_qxt_tj {
                padding-top: 20px;
                font-size: 16px;
            }
            .mjob2_kstj_ts_nr {
                display: inline-block;
                padding: 0 10px;
                line-height: 16px;
            }
        </style>
    </header>

    <div class="main-content">
        <div class="card-block">
            <div class="sy-tj-nr">

                <div class="zlf-sy-sjtj-top">
                    <div class="zlf-sy-top-a">
                        <div class="zlf-sy-top-nr">
                            <img class="zlf-sy-top-img" src="img/jrfh.png" />
                            <div class="zlf-sy-top-zhi">
                                <p class="zlf-sy-top-bt">今日发货</p>
                                <p class="zlf-sy-top-tj">9863</p>
                            </div>
                        </div>
                    </div>
                    <div class="zlf-sy-top-a">
                        <div class="zlf-sy-top-nr"style="background:linear-gradient(-59deg,rgba(169,135,255,1),rgba(129,215,255,1));">
                            <img class="zlf-sy-top-img" src="img/jrsh.png" />
                            <div class="zlf-sy-top-zhi">
                                <p class="zlf-sy-top-bt">今日收货</p>
                                <p class="zlf-sy-top-tj">1599</p>
                            </div>
                        </div>
                    </div>
                    <div class="zlf-sy-top-a">
                        <div class="zlf-sy-top-nr"style="background:linear-gradient(-59deg,rgba(223,118,253,1),rgba(255,148,198,1));">
                            <img class="zlf-sy-top-img" src="img/dfj.png" />
                            <div class="zlf-sy-top-zhi">
                                <p class="zlf-sy-top-bt">待收货</p>
                                <p class="zlf-sy-top-tj">1599</p>
                            </div>
                        </div>
                    </div>
                    <div class="zlf-sy-top-a">
                        <div class="zlf-sy-top-nr"style="background:linear-gradient(-59deg,rgba(135,158,255,1),rgba(130,212,255,1));">
                            <img class="zlf-sy-top-img" src="img/kcl.png" />
                            <div class="zlf-sy-top-zhi">
                                <p class="zlf-sy-top-bt">库存量</p>
                                <p class="zlf-sy-top-tj">1865</p>
                            </div>
                        </div>
                    </div>

                </div>





                <div class="zlf-sy-nr-l" >
                    <div class="zlf-sy-nr-l-a">
                        <div class="zlf-sy-tj-bt">
                            <p class="zlf-sy-bt-l">出入库数量统计表</p>
                            <div class="sjqh">
                                <a onclick="weekBut()"><p id="weekP" style="border-radius: 8px 0px 0px 8px;">一周</p></a>
                                <a onclick="monthBut()"><p id="monthP" class="sy-qh-a" style="color: cornflowerblue;">当月</p></a>
                                <a onclick="yearBut()"><p id="yearP" style="border-radius: 0px 8px 8px 0px;">一年</p></a>
                            </div>
                            <div class="clear"></div>
                        </div>

                        <div class="zlf-sy-tj-l" id="lineChart">
                            <!--<img src="img/sy-zxt.png" />-->
                        </div>

                    </div>


                </div>
                <div class="zlf-sy-nr-r">

                    <div class="wsdjc-div">
                        <div class="zlf-sy-tj-bt">
                            <p class="zlf-sy-bt-l">温湿度智能检测</p>
                        </div>

                        <div class="mjob2_center_sq_qxt">
                            <div class="circleChart" id="2" data-value="77" style="color: #575757; position: relative;"><canvas class="circleChart_canvas" width="150" height="150" style="margin-left: auto; margin-right: auto; display: block;"></canvas><p class="circleChart_text" style="position: absolute; line-height: 150px; top: 0px; width: 100%; margin: 0px; padding: 0px; text-align: center; font-size: 28.5714px; font-weight: normal; font-family: sans-serif;">80%</p></div>
                            <script>
                                $(".circleChart#2").circleChart({
                                    size: 150,
                                    value: 40,
                                    color: "#9892fa",
                                    backgroundColor: "#e6e6e6",
                                    text: 0,
                                    onDraw: function(el, circle) {
                                        circle.text(Math.round(circle.value) + "%");
                                    }
                                });
                                setInterval(function() {
                                    $("#0").circleChart({
                                        value: Math.random() * 100
                                    });
                                }, 4000);
                            </script>
                            <div class="mjob2_center_sq_qxt_tj">
                                <div class="mjob2_kstj_ts_nr"><span class="mjob2_kstj_ts_nr_fk" style="background:#e6e6e6;"></span>温度：<span style="color: #5b61d1;">正常</span></div>
                            </div>

                        </div>

                        <div class="mjob2_center_sq_qxt">
                            <div class="circleChart" id="3" data-value="77" style="color:#ff6b11; position: relative;"><canvas class="circleChart_canvas" width="150" height="150" style="margin-left: auto; margin-right: auto; display: block;"></canvas><p class="circleChart_text" style="position: absolute; line-height: 150px; top: 0px; width: 100%; margin: 0px; padding: 0px; text-align: center; font-size: 28.5714px; font-weight: normal; font-family: sans-serif;">80%</p></div>
                            <script>
                                $(".circleChart#3").circleChart({
                                    size: 150,
                                    value: 30,
                                    color: "#9892fa",
                                    backgroundColor: "#e6e6e6",
                                    text: 0,
                                    onDraw: function(el, circle) {
                                        circle.text(Math.round(circle.value) + "%");
                                    }
                                });
                                setInterval(function() {
                                    $("#0").circleChart({
                                        value: Math.random() * 100
                                    });
                                }, 4000);
                            </script>
                            <div class="mjob2_center_sq_qxt_tj">
                                <div class="mjob2_kstj_ts_nr"><span class="mjob2_kstj_ts_nr_fk" style="background:#e6e6e6;"></span>温度：<span style="color: #ff6b11;">异常</span></div>
                            </div>

                        </div>

                    </div>

                    <div class="wsdjc-div">
                        <div class="zlf-sy-tj-bt">
                            <p class="zlf-sy-bt-l">水浸智能检测</p>
                        </div>
                        <div>
                            <img style="float: left; margin-left: 20px; margin-top: 20px; margin-right: 20px;" src="img/sjznjc.png" />
                            <p class="jcsj-btn">解除预警</p>
                        </div>

                    </div>



                </div>



            </div>
        </div>
    </div>
    <div data-th-include="common/footer"></div>
</section>
<script>
    var monthNumber = new Date();
    var monthArr = new Array();
    var arr1 ;
    var arr2 ;
    var arr3 ;
    for (var i=0;i < monthNumber.getDate();i++) {
        monthArr.push(i+1)
    }
    arr1 = monthArr;
    arr2 = [11, 11, 15, 13, 12, 13, 10, 15, 13, 12, 13, 13, 12, 13]
    arr3 = [1, 2, 2, 5, 3, 2, 0, 2, 5, 3, 2, 5, 3, 2]
    Rewrite()
    var weekArr =  ['周一','周二','周三','周四','周五','周六','周日']
    var yearArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

    function weekBut(){
        document.getElementById("weekP").style.color="cornflowerblue";
        document.getElementById("monthP").style.color="black";
        document.getElementById("yearP").style.color="black";
        console.log(1)
        arr1 = weekArr;
        arr2 = [11, 11, 15, 13, 12, 13, 10]
        arr3 = [1, 2, 2, 5, 3, 2, 0]
        Rewrite()
    }
    function monthBut(){
        document.getElementById("weekP").style.color="black";
        document.getElementById("monthP").style.color="cornflowerblue";
        document.getElementById("yearP").style.color="black";
        arr1 = monthArr;
        arr2 = [11, 11, 15, 13, 12, 13, 10, 15, 13, 12, 13, 13, 12, 13]
        arr3 = [1, 2, 2, 5, 3, 2, 0, 2, 5, 3, 2, 5, 3, 2]
        Rewrite()
    }
    function yearBut(){
        document.getElementById("weekP").style.color="black";
        document.getElementById("monthP").style.color="black";
        document.getElementById("yearP").style.color="cornflowerblue";
        arr1 = yearArr;
        arr2 = [11, 11, 15, 13, 12, 13, 10, 15, 13, 12, 13, 10]
        arr3 = [1, 2, 2, 5, 3, 2, 0, 2, 5, 3, 2, 0]
        Rewrite()
    }



    function Rewrite(){
        option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:["入库","出库"]
            },

            calculable : false,

            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : arr1
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} '
                    }
                }
            ],

            series : [
                {
                    name:'入库',
                    type:'line',
                    data:arr2,
                    itemStyle: {
                        normal: {
                            color: '#6cb041',
                            lineStyle:{
                                width:5//设置线条粗细
                            }
                        }
                    }
                },
                {
                    name:'出库',
                    type:'line',
                    data:arr3,
                    itemStyle: {
                        normal: {
                            color: '#6cb041',
                            lineStyle:{
                                width:5//设置线条粗细
                            }
                        }
                    }
                }

            ]
        };


        //初始化echarts实例
        var myLineChart = echarts.init(document.getElementById('lineChart'));

        //使用制定的配置项和数据显示图表
        myLineChart.setOption(option);
    }
</script>